<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>管理云平台</title>
	<link rel="stylesheet" href="/css/common.css">
	<link rel="stylesheet" href="/css/menu.css" />
	<link rel="stylesheet" href="/scriptZIP/font-awesome.css">
	<style>
		.header_img {
			width: 128px;
			height: 128px;
		}

		i.layui-icon {
			font-size: 1.5rem;
			color: black;
		}

		.select {
			color: #E6E6E6;
		}

		.main-side-scroll {
			width: 220px;
			border-right: 1px solid white;
			
			
		}

		.home {
			margin-left: calc(220px + 2.5rem);
		}

		.load,
		.home {
			width: 20px;
			height: 20px;
			margin-top: 5px;
			cursor: pointer;
		}

		.slogan {
			color: red;
			margin: 0 5%;
			font-size: 16px;
			font-weight: bold;
		}

		iframe { 
			width: calc(100% - 10px);
			height: 98%;
			overflow-y: scroll;
			margin-top: -1em;
			border-left: 1px solid white;
			overflow: hidden;
		}

		.main-right {
			max-width: 230px;
			line-height: 30px;
			height: 100%;
			text-align: right;
			cursor: pointer;
			position: relative;
		}

		.main-username {
			font-size: 16px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: black;
		}

		.main-right:hover .main-dropdown-menu {
			/* visibility: visible; */
			height: 80px;
		}

		.main-dropdown-menu {
			/* visibility: hidden; */
			height: 0;
			box-shadow: 0 0px 4px 0 rgb(206, 204, 204);
			overflow: hidden;
			border-radius: 5px;
			/* padding: 0; */
			background-color: #ffffff;
			position: absolute;
			top: 40px;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
			font-size: 14px;
			transition: .25s ease-in-out all;
		}

		.main-dropdown-menu li {
			width: 100px;
			padding: 3px 1px;
		}

		.main-dropdown-menu li:hover {
			/* background-color: #b9e8ff; */
			/* color: white; */
		}

		.main-dropdown-download img {
			width: 20px;
			height: 20px;
		}

		.main-dropdown-menu-a {
			display: block;
			width: 100%;
		}

		.main-logo_l {
			width: 220px;
			/* height: 40px; */
			font-size: 20px;
			line-height: 40px;
			font-weight: bold;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			color: black;
			text-align: center;
		}
	</style>

</head>

<body class="main-body">
	<div id="vue-root">
		<div class="main-header" style="height: 30px;">
			<!-- <div class="main-logo" style="width: 180px; line-height: 40px; font-size: 22px;">热学管理平台</div>

			<ul class="main-nav main-right">
				<a class="main-nav-item" href="/pc/logout" style="line-height: 30px; font-size: 14px;">点击退出云平台</a>
			</ul> -->
			<div class="main-logo_l">热学管理平台</div>
			<div class="main-right">
				<p class="main-username">用户：{{username}}</p>
				<ul class="main-dropdown-menu">
					<li>
						<a class="main-dropdown-menu-a" href="../agent/history.html" target="myiframe">历史公告</a>
					</li>
					<li class="main-dropdown-logout">
						<a class="main-dropdown-menu-a" href="/pc/logout">点击退出</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="main-side" style="width: 220px;margin-top: -20px;">
			<div class="main-side-scroll">
				<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
					<input type="file" id="file" ref="file" name="file" accept="image/*" @change="upload">
				</form>

				<div class="user_info" style="height: 80px;">
					<label for="file">
						<img :src="getImg(avatar)" alt="" class="header_img" title="点击更换头像"
							style="width: 70px;height: 70px;">
					</label>
				</div>
				<br>
				<div style="margin-top: 10px; border-top:white 1px solid; overflow: hidden; height: 1px;"></div>

				<ul id="accordion" class="accordion">
					<li v-for="(menu,index) in menues" :key="index" :class="{open:!fold&&mainstyle0==index}"
						v-if="menu.menues.length>0">

						<div class="link" @click="onclick(index)">
							<i class="fa" :class="{[menu.headerImg]:true}"></i>{{menu.title}}
							<i class="fa fa-chevron-down arrow"></i>
						</div>

						<transition name="collapse" mode="out-in">
							<ul class="submenu" v-show="!fold&&mainstyle0==index">
								<li v-for="(sub,index1) in menu.menues">
									<a target="myiframe" :href="sub.ref" @click="onclick1(index,index1)"
										v-text="sub.title" :class="{selected:mainstyle==index&&mainstyle1==index1}"></a>
								</li>
							</ul>
						</transition>


					</li>
				</ul>
			</div>
		</div>
		<div class="main-content main-content-right" style="left: 220px;width: calc(100% - 220px);top: 0;">
			<iframe src="school.html" name="myiframe"></iframe>
		</div>
		<div class="record-number">
			<a>广州护校通电子科技有限公司版权所有&copy;2006-2019</a>
			<a href="http://www.miit.gov.cn" target="_blank">粤ICP备17102741号</a>
			<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011302002266" target="_blank">
				<img class="icon" src="image/police-icon.png">&nbsp;&nbsp;粤公网安备&nbsp;&nbsp;44011302002266号
			</a>
		</div>
	</div>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/js/bg.js"></script>

	<script>
		var app = new Vue({
			el: "#vue-root",
			data: {
				fold: true,
				mainstyle: 0,
				mainstyle1: null,
				mainstyle0: 0,
				menues: [{
					title: '代理商管理',
					ref: 'agent.html',
					headerImg: 'fa-user-secret',
					menues: [{
						title: '概览详情',
						ref: 'overview.html',
					},
					{
						title: '校园数据',
						ref: 'campusDataSummary.html',
					},
					 {
						title: '代理商管理',
						ref: 'agent.html',
					}]
				}, {
					title: '学校管理',
					ref: 'school.html',
					headerImg: 'fa-university',
					menues: [{
						title: '学校管理',
						ref: 'school.html',
					}]
				}, {
					title: '设备管理',
					ref: 'device.html',
					headerImg: 'fa-cog',
					menues: [{
						title: '设备管理',
						ref: 'device.html',
					}, {
						title: '打卡设备',
						ref: 'device.html?type1=0',
					}, {
						title: '人脸识别设备',
						ref: 'device.html?type1=1',
					}, {
						title: '人脸识别测温设备',
						ref: 'device.html?type1=2',
					}, {
						title: '闸机设备',
						ref: 'device.html?type1=3',
					}, {
						title: '校车设备',
						ref: 'device.html?type1=4',
					}, {
						title: '可视化放学设备',
						ref: 'device2.html?type=2',
					}, {
						title: '访客设备',
						ref: 'device2.html',
					}, {
						title: '分班播报设备',
						ref: 'board.html',
					},]
				}, {
					title: '公众号',
					ref: 'wechat_platform.html',
					headerImg: 'fa-comments',
					menues: [{
						title: '公众号',
						ref: 'wechat_platform.html',
					}]
				}, {
					title: '直播管理',
					ref: 'live.html',
					headerImg: 'fa-desktop',
					menues: [{
						title: '直播管理',
						ref: 'live.html',
					}]
				}, {
					title: '考勤卡库',
					ref: 'card.html',
					headerImg: 'fa-credit-card',
					menues: [{
						title: '考勤卡库',
						ref: 'card.html',
					}]
				}, {
					title: '支付宝账号',
					ref: 'alipay.html',
					headerImg: 'fa-paypal',
					menues: [{
						title: '支付宝账号',
						ref: 'alipay.html',
					}]
				}, {
					title: '其他',
					headerImg: 'fa-bell',
					menues: [{
						title: '公告🔈',
						ref: 'agent/history.html',
					}, {
						title: '学校排序',
						ref: 'sort.html',
					}, {
						title: "设备地图",
						ref: 'map.html'
					}, {
						title: 'apk管理',
						ref: 'agent/apk.html',
					},{
						title: '交费套餐',
						ref: 'mealSettings.html',
					}
				]
				}],
				avatar: null,
				username: null
			},
			created: function () {
				axios.get('/pc/user').then(function (res) {
					this.avatar = res.data.avatar;
					this.username = res.data.username;
				}.bind(this));
			},
			methods: {
				upload: function () {
					axios.post('/pc/upload/avatar',
						new FormData(this.$refs.form)).then(function (res) {
							var avatar = res.data.data;
							axios.post('/pc/user/avatar?avatar=' + avatar).then(function (res) {
								this.avatar = avatar;
							}.bind(this));
						}.bind(this));
				},
				getImg: function (pic) {
					return pic ? '/static/0/avatar/' + pic : '/image/admin.svg';
				},
				onclick1: function (index, index1) {
					this.mainstyle = index;
					this.mainstyle1 = index1;
				},
				onclick: function (index) {
					if (this.mainstyle0 == index) this.fold = !this.fold;
					else {
						this.fold = false;
						this.mainstyle0 = index;
					}
				},
			}
		});

		sessionStorage.removeItem('hxt-p');
	</script>
</body>

</html>